<template>
	<div class="doc_pc_components_NumberInput">
		<div>
			插槽:
			<NumberInput
				v-model="val"
				style="width:150px;"
			>
				<template #prefix>
					<Icon
						name="bi-person-circle"
						style="flex-shrink:0"
					/>
				</template>
				<template #suffix>
					<Icon
						name="bi-search"
						style="flex-shrink:0"
					/>
				</template>
			</NumberInput>
		</div>
		<div>内容: {{val}}</div>
		<div>
			<NumberInput
				v-model="val"
				autofocus
				style="width:60px;"
			/>
			正数:
			<NumberInput
				v-model="val2"
				:min="0"
				style="width:60px;"
			/>
			整数
			<NumberInput
				v-model="val3"
				:precision="0"
				style="width:60px;"
			/>
			最小10
			<NumberInput
				v-model="val4"
				:min="10"
				:hide-button="false"
				style="width:60px;"
			/>
			最大-10
			<NumberInput
				v-model="val5"
				:max="-10"
				:hide-button="false"
				style="width:60px;"
			/>
			-10至10
			<NumberInput
				v-model="val6"
				:min="-10"
				:max="10"
				:hide-button="false"
				style="width:60px;"
			/>
		</div>
		<div>内容: {{val7}}</div>
		<div>
			<NumberInput
				v-model="val7"
				:min="5"
				:max="100"
				lazy
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>内容: {{val8}}</div>
		<div>
			<NumberInput
				v-model="val8"
				:min="10"
				:max="100"
				lazy
				allow-empty
				clearable
				hide-button
				placeholder="输入数字"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val9"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				allow-empty
				hide-button
				style="width:150px;"
			/>
			<NumberInput
				v-model="val9"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				allow-empty
				clearable
				hide-button
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				shape="round"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				shape="noBorder"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				readonly
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				readonly
				shape="round"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				readonly
				shape="noBorder"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				readonly
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val8"
				allow-empty
				disabled
				clearable
				placeholder="输入数字"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				disabled
				shape="round"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				shape="round"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
		<div>
			<NumberInput
				v-model="val"
				disabled
				shape="noBorder"
				clearable
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<NumberInput
				v-model="val"
				disabled
				shape="noBorder"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				clearable
				style="width:150px;"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {NumberInput,Icon} from 'powerful-ui/pc-default';

const val=shallowRef('');
const val2=shallowRef('');
const val3=shallowRef('');
const val4=shallowRef('');
const val5=shallowRef('');
const val6=shallowRef('');
const val7=shallowRef('');
const val8=shallowRef('');
const val9=shallowRef('');
</script>

<style lang="scss">
.doc_pc_components_NumberInput{
	>div{
		margin:20px;
		.pf-NumberInput{
			margin-right:10px;
		}
	}
}
</style>